<template>
    <div class="white-box">
        <title-more title="数据概览">
            <template #sub>
                <el-popover placement="right-start" title="" :width="700" trigger="hover">
                    <template #reference>
                        <el-icon color="#C1C1C1" :size="18"><QuestionFilled /></el-icon>
                    </template>
                    <template #default>
                        <p class="p-popover">注：实时数据仅供即时运营参考，最终以离线数据为准。</p>
                        <p class="p-popover">付款订单：统计月内，下单成功并付款的订单数</p>
                        <p class="p-popover">付款人数：统计月内，下单成功的客户数，同1个客户多次下单也只记为1</p>
                        <p class="p-popover">总订单数：统计月内所有订单，不会随着筛选条件变化</p>
                        <p class="p-popover">总付款人数：统计月内所有付款客户，不会随着筛选条件变化</p>
                        <p class="p-popover">本月复购率：统计月内，支付订单成功的客户中非首次支付的客户比例</p>
                    </template>
                </el-popover>
            </template>
        </title-more>
        <div class="data-prev flexs">
            <div class="data-prev__item">
                <div class="data-prev__tip">本月付款订单</div>
                <p class="data-prev__nums">{{ objs.pay_order || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">本月付款人数</div>
                <p class="data-prev__nums">{{ objs.pay_user || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">总订单数</div>
                <p class="data-prev__nums">{{ objs.total_order || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">总付款人数</div>
                <p class="data-prev__nums">{{ objs.total_pay || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">本月复购率</div>
                <p class="data-prev__nums">{{ objs.repurchase_rate || "0" }}<span v-if="objs.repurchase_rate">%</span></p>
                <!-- <div class="data-prev__ratio">
                    上月：
                    <span class="ratio-nums">{{ objs.last_repurchase_rate || "-" }}<span v-if="objs.last_repurchase_rate">%</span></span>
                </div> -->
            </div>
        </div>
    </div>

    <div class="white-box">
        <title-more title="筛选时间">
            <template #sub>
                <el-popover placement="right-start" title="" :width="100" trigger="hover">
                    <template #reference>
                        <el-icon color="#C1C1C1" :size="18"><QuestionFilled /></el-icon>
                    </template>
                    <template #default>
                        <p class="p-popover">默认筛选当天</p>
                        <p class="p-popover">统计时间：从当天往前推一个月</p>
                    </template>
                </el-popover>
            </template>
        </title-more>
        <div class="task-one" style="margin-bottom: 0">
            <div class="task-one__item">
                <span class="task-one__label">选择时间：</span>
                <el-date-picker v-model="area_time" type="date" value-format="YYYY-MM-DD" :disabled-date="disabledDate" placeholder="请选择时间" />
            </div>
            <div class="task-one__btn">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">查询</el-button>
            </div>
        </div>
    </div>

    <!-- 付款订单数 -->
    <div class="white-box">
        <title-more title="付款订单数"></title-more>
        <div class="echars-one__cont">
            <div id="echart-pay-order" class="echart-view"></div>
        </div>
    </div>

    <!-- 付款订单金额 -->
    <div class="white-box">
        <title-more title="付款订单金额"></title-more>
        <div class="echars-one__cont">
            <div id="echart-pay-money" class="echart-view"></div>
        </div>
    </div>

    <!-- 新增/累计付款会员 -->
    <div class="white-box">
        <title-more title="新增/累计付款会员"></title-more>
        <div class="echars-one__cont">
            <div id="echart-user" class="echart-view"></div>
        </div>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from "vue"
import { Search, QuestionFilled } from "@element-plus/icons-vue"
import TitleMore from "@components/title-more.vue"
import GoBack from "@components/GoBack.vue"

// echarts
import EchartsLine from "@common/echarts-line"
import EchartsBar from "@common/echarts-bar"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getDataInfo()
    window.onresize = echartResize
})

onBeforeUnmount(() => {
    echartsDispose()
    window.onresize = null
})

// 概况
const objs = ref({
    pay_order: 0,
    pay_user: 0,
    total_order: 0,
    total_pay: 0,
    repurchase_rate: "0",
    // last_repurchase_rate: "0",
})
function getDataInfo() {
    proxy.$axios
        .get("data/overview/tongji", {
            params: {
                day: area_time.value,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                objs.value.pay_order = result.month_order_count
                objs.value.pay_user = result.month_user_count
                objs.value.total_order = result.total_order_count
                objs.value.total_pay = result.total_user_count
                objs.value.repurchase_rate = result.month_user_count == 0 ? 0 : Math.floor((result.month_repurchase_count / result.month_user_count) * 100)

                userEchart()
                payOrderEchart()
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 筛选
const area_time = ref("")
const search_btn = ref(false)
const handleSearch = () => {
    search_btn.value = true
    getDataInfo()
}

/**
 * 图表
 * @param {Object} echart_pay_order 付款订单数
 * @param {Object} echart_pay_money 付款订单金额
 * @param {Object} chart_user 新增/累计付款会员
 */
let chart_user = null
let echart_pay_order = null
let echart_pay_money = null
function echartResize() {
    chart_user.resize()
    echart_pay_order.resize()
    echart_pay_money.resize()
}
function echartsDispose() {
    chart_user != null && chart_user.dispose()
    echart_pay_order != null && echart_pay_order.dispose()
    echart_pay_money != null && echart_pay_money.dispose()
    chart_user = null
    echart_pay_order = null
    echart_pay_money = null
}

// 付款订单数-柱状图
function userEchart() {
    echart_pay_order = proxy.$echarts.init(document.getElementById("echart-pay-order"))
    let order_nums = [],
        order_price = [],
        xData = []
    proxy.$axios
        .get("data/overview/order", {
            params: {
                day: area_time.value,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.flower_items
                result.map((item) => {
                    order_nums.push(item.order_num)
                    order_price.push(item.money)
                    xData.push(item.date)
                })
                let series = [
                    {
                        data: order_nums,
                        type: "bar",
                        name: "付款订单数",
                    },
                ]
                let option = EchartsBar(xData, series)
                echart_pay_order.setOption(option)

                payPriceEchart(xData, order_price)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 付款订单金额
function payPriceEchart(xData, order_price) {
    echart_pay_money = proxy.$echarts.init(document.getElementById("echart-pay-money"))
    let series = [
        {
            data: order_price,
            type: "line",
            name: "付款订单金额",
            smooth: true,
            showSymbol: false,
            areaStyle: {
                opacity: 1,
                color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(64, 158, 255,0.8)",
                    },
                    {
                        offset: 1,
                        color: "rgba(255, 255, 255, 0.3)",
                    },
                ]),
            },
        },
    ]
    let option = EchartsLine(xData, [], series, "6%")
    echart_pay_money.setOption(option)
}

// 新增/累计付款会员-折线
function payOrderEchart() {
    chart_user = proxy.$echarts.init(document.getElementById("echart-user"))
    let new_nums = [],
        total_nums = [],
        xData = []
    proxy.$axios
        .get("data/overview/user", {
            params: {
                day: area_time.value,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.user_items
                result.map((item) => {
                    new_nums.push(item.new_num)
                    total_nums.push(item.total_num)
                    xData.push(item.date)
                })
                let series = [
                    {
                        data: new_nums,
                        type: "line",
                        name: "新增付款会员",
                        smooth: true,
                        showSymbol: false,
                    },
                    {
                        data: total_nums,
                        type: "line",
                        name: "累计付款会员",
                        smooth: true,
                        showSymbol: false,
                    },
                ]
                let legend = ["新增付款会员", "累计付款会员"]
                let option = EchartsLine(xData, legend, series)
                chart_user.setOption(option)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}
</script>
<script>
export default {
    name: "TradingOverview",
}
</script>

<style lang="less" scoped>
.echart-view {
    width: 100%;
    height: 340px;
}
.p-popover {
    font-size: @font-size-md;
    color: #595961;
    margin: @margin-xs 0px;
}
.data-prev {
    .data-prev__item {
        width: 20%;
        padding: @padding-mdl;
        overflow: hidden;
        border-radius: 10px;
        .data-prev__tip {
            margin-bottom: @margin-md;
            color: @gray-6;
        }
        .data-prev__nums {
            font-size: 26px;
            color: #111;
        }
        &:hover {
            background-color: #f4f8ff;
        }
        .data-prev__ratio {
            margin-top: @margin-base;
            color: @gray-6;
            .ratio-nums {
                color: @red;
                margin-left: -6px;
            }
        }
    }
}
</style>
